<style lang="stylus">
  @import '../../common/stylus/mixin'
  .header {
    position:relative;
    height: 1.31944rem;
    font-size: 0.5rem !important;
    color: #a1a1a1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-1px(217,217,217);
    .back{
      height: 100%;
      flex: .5;
      bg-image('back');
      background-size:24px;
      background-repeat:no-repeat;
      background-position: 50% 50%;
    }
    .searchFoods {
      flex:4;
      height:100%;
      position:relative;
      .search{
        position: absolute;
        left: 0;
        right: 0;
        width: 90%;
        top: 0.27778rem;
        height: 0.83333rem;
        line-height: 0.83333rem;
        font-size:0.38889rem;
        padding-left: 0.86111rem;
        background: #efefef;
        border-radius: 4px;
        bg-image('search');
        background-size:0.5rem;
        background-repeat:no-repeat;
        background-position: 10px 50%;
        -webkit-user-select:none;
        outline:none;
      }
    }
    .displayMode-list {
      height: 100%;
      flex: .5;
      bg-image('list');
      background-size:24px;
      background-repeat:no-repeat;
      background-position: 50% 50%;
    }
    .displayMode-larger {
      height: 100%;
      flex: .5;
      bg-image('larger');
      background-size:24px;
      background-repeat:no-repeat;
      background-position: 50% 50%;
    }
  }
</style>
<template lang="html">
  <div class="header border-1px">
    <back></back>
    <div class="searchFoods" @click="goSearch()">
      <input type="texttext" class="search" placeholder="请输入关键字" v-model="searchKey">
    </div>
    <span class="displayMode" :class="[showList ? 'displayMode-list' : 'displayMode-larger']" @click="changeDisplayMode()"></span>
  </div>
</template>

<script>
  import back from 'components/back/Back';
  import {getSessionStorageItem} from '../api/utils';
  export default {
    props: {
      seller: {
        type: Object
      },
      searchKeywords: {
        type: String,
        default: ''
      }
    },
    created() {
      this.searchKey = this.searchKeywords;
    },
    mounted() {
    },
    data() {
      return {
        searchKey: '', // 查询条件
        result: '',
        showList: true
      }
    },
    activated() {
      let businessSetting = getSessionStorageItem('businessSetting');
      if (businessSetting !== null) {
        if (businessSetting.displayMode === 'LIST') {
          this.showList = true;
        }
      }
    },
    methods: {
      goBackFun() {
        this.$router.back(-1);
      },
      goSearch() {
        this.$router.push('/search');
      },
      changeDisplayMode() {
        this.showList = !this.showList;
        this.$emit('changeDisplayModeFun', this.showList);
      }
    },
    components: {
      back
    }
  }
</script>
